import { useRef, useEffect } from 'react';

interface DanmuElementProps {
    id: number;
    children: React.ReactNode;
    onRegister: (id: number, element: HTMLElement | null) => void;
    className?: string;
    style?: React.CSSProperties;
}

export const DanmuElement: React.FC<DanmuElementProps> = ({
    id,
    children,
    onRegister,
    className,
    style
}) => {
    const elementRef = useRef<HTMLSpanElement>(null);

    useEffect(() => {
        onRegister(id, elementRef.current);
        return () => onRegister(id, null);
    }, [id, onRegister]);

    return (
        <span
            ref={elementRef}
            className={className}
            style={style}
        >
            {children}
        </span>
    );
};
